<template>
  <el-card>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleFormRef"
      label-width="160px"
      size="medium"
    >
      <el-form-item label="交易类型 :">
        <button class="head-buttonTX head-button-color" @click="withdraw">
          提现
        </button>
        <button class="head-buttonZH" @click="transfer" disabled>划转</button>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="11">
          <el-form-item label="付款账户 :" prop="listMerAccInfoItem">
            <el-select
              v-model="ruleForm.listMerAccInfoItem"
              placeholder="请输入"
              class="form-width"
              @change="changeSelect"
            >
              <el-option
                v-for="item in listMerAccInfo"
                :key="item.merNo"
                :label="item.merAccName"
                :value="`${item.bankAcctName}'-'${item.merAccName}'-'${item.merAccNo}'-'${item.merName}'-'${item.merNo}'-'${item.bankCardNo}`"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="户名 :">
            <span>{{ ruleForm.bankAcctName }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="11">
          <el-form-item label="收款账户 :">
            <span class="form-width">{{ ruleForm.bankCardNo }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="13">
          <el-form-item label="户名 :">
            <span>{{ ruleForm.bankAcctName }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="11">
          <el-form-item label="转出金额（元） :" prop="txnAmt">
            <el-input
              v-model="ruleForm.txnAmt"
              type="text"
              placeholder="支持小数点后两位"
              @blur="inputNumber"
              class="form-width"
              onkeyup="value=value.replace(/[^\d.]/g, '')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="flex_1">
          <div>
            <el-form-item label="是否查询到账金额 :">
              <el-radio-group v-model="searchStatus" style="margin-top: 6px">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div style="display: flex" v-if="searchStatus == 1">
            <el-form-item label="起止时间 :">
              <el-date-picker
                size="small"
                v-model="dateRangeCreatedDate"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
            <el-button
              @click="handleSearch"
              :disabled="dateRangeCreatedDate.length == 0"
              type="primary"
              round
              size="small"
              class="search_button"
              >查询</el-button
            >
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="可提现金额 :">
            <span>{{ ruleForm.withdrawableAmount }} 元 </span>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="本次转出手续费 :">
            <span>{{ ruleForm.serviceFee }} 元 </span>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="预计到账金额 :">
            <span>{{ ruleForm.actReceiveAmt }} 元 </span>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-form-item label="备注 :">
        <el-input
          type="textarea"
          v-model="ruleForm.remark"
          class="form-width"
          :rows="6"
          placeholder="请填写备注信息"
        >
        </el-input>
      </el-form-item> -->
      <el-form-item>
        <el-button
          v-loading="loading"
          class="form-button"
          type="primary"
          :disabled="inexistence || this.loading"
          @click="submitForm('ruleFormRef')"
          >确认</el-button
        >
      </el-form-item>
    </el-form>
    <el-dialog
      title="查询"
      :visible.sync="searchDialog"
      width="30%"
      :before-close="handleClose"
    >
      <div class="search_tip">
        <span>到账金额:{{ entrySumAmt }}元</span>
        <el-tooltip
          class="item"
          effect="light"
          :content="`“到账金额”为您所选时间范围内实际入账金额之和，\n若您签约的结算方式为D0，则实时入账；\n若您签约的结算方式为非D0，到账金额不含未结算入账金额；`"
          placement="bottom"
        >
          <i style="margin-left: 5px" class="el-icon-question"></i>
        </el-tooltip>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  listStationMerAccInfo,
  queryBalance,
  getServiceFee,
  cash,
  searchAmt,
} from "@/api/finance/withdraw";
export default {
  name: "WithdrawDeposit",
  data() {
    return {
      searchStatus: 0,
      entrySumAmt: "",
      searchDialog: false,
      dateRangeCreatedDate: [],
      loading: false,
      // 提示
      messageText: "正在提交",
      // 确认按钮禁用
      inexistence: true,
      // 查询油站账户信息列表
      listMerAccInfo: [],
      ruleForm: {
        radio: 0,
        listMerAccInfoItem: "",
        bankAcctName: "",
        merAccName: "",
        merAccNo: "",
        merName: "",
        merNo: "",
        // 可提现金额
        bankCardNo: "",
        withdrawableAmount: 0,
        // 交易金额
        txnAmt: null,
        serviceFee: 0, //手续费
        actReceiveAmt: 0, //到账金额
        // 备注
        remark: "",
      },
      rules: {
        listMerAccInfoItem: [
          { required: true, message: "请选择付款账户", trigger: "change" },
        ],
        txnAmt: [
          {
            required: true,
            type: "string",
            trigger: "blur",
            message: "请输入转出金额",
          },
          {
            pattern:
              /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
            message: "支持小数点后两位",
          },
        ],
      },
    };
  },
  created() {
    this.getListStationMerAccInfo();
  },
  methods: {
    // 查询
    async handleSearch() {
      let data;
      data = {
        merAccNo: this.ruleForm.merAccNo,
        startTime: this.dateRangeCreatedDate[0],
        endTime: this.dateRangeCreatedDate[1],
      };
      const res = await searchAmt(data);
      if (res.data.success) {
        this.entrySumAmt = res.data.data.entrySumAmt;
        this.searchDialog = true;
      } else {
        this.$message.error(res.data.message);
      }
    },
    // 关闭弹窗
    handleClose() {
      this.searchDialog = false;
    },
    // 查询油站账户信息列表
    async getListStationMerAccInfo() {
      const results = await listStationMerAccInfo();
      this.listMerAccInfo = results;
      // console.log("账户信息列表o", info);
    },

    // 点击选择器选中条件触发
    async changeSelect() {
      const results = this.ruleForm.listMerAccInfoItem.split("'-'");
      this.ruleForm.bankAcctName = results[0];
      this.ruleForm.merAccName = results[1];
      this.ruleForm.merAccNo = results[2];
      this.ruleForm.merName = results[3];
      this.ruleForm.merNo = results[4];
      this.ruleForm.bankCardNo = results[5];
      // console.log("条件触发", results);
      // 获取可提现金额
      const data = {
        // 清分商户号
        clearMerNo: this.ruleForm.merNo,
        // 商户账户号
        merAccNo: this.ruleForm.merAccNo,
        // 交易金额
        txnAmt: this.ruleForm.txnAmt,
        // 交易类型 cash提现,transfer转账
        txnType: "cash",
      };
      const res = await queryBalance(data);
      this.ruleForm.withdrawableAmount = res.balance;
      // console.log("获取可提现金额", res);
      this.ruleForm.txnAmt = null;
    },

    // 输入提现金额
    inputNumber(e) {
      if (!e) {
        // 如果没有输入提现金额，手续费，到账金额为0
        this.ruleForm.serviceFee = 0;
        this.ruleForm.actReceiveAmt = 0;
        return;
      }
      // 表单校验通过发送请求获取，提现金额，手续费，
      this.serviceFee();
    },

    // 表单校验通过发送请求获取，提现金额，手续费，
    serviceFee() {
      this.$refs.ruleFormRef.validate().then(async (res) => {
        // 获取可提现金额
        const data = {
          // 清分商户号
          clearMerNo: this.ruleForm.merNo,
          // 商户账户号
          merAccNo: this.ruleForm.merAccNo,
          // 交易金额
          txnAmt: this.ruleForm.txnAmt,
          // 交易类型 cash提现,transfer转账
          txnType: "cash",
        };
        const results = await getServiceFee(data);
        if (results.code === 200) {
          if (results.data.data) {
            this.inexistence = false;
            this.ruleForm.serviceFee = results.data.data.serviceFee;
            this.ruleForm.actReceiveAmt = results.data.data.actReceiveAmt;
          } else {
            this.inexistence = true;
            this.messageText = results.data.message;
            this.open();
            this.ruleForm.serviceFee = 0;
            this.ruleForm.actReceiveAmt = 0;
            // console.log("请求返回数据",results.data)
          }
        }
      });
    },

    // 点击确定表单校验
    submitForm(formName) {
      this.loading = true;
      this.$refs[formName].validate((valid) => {
        // console.log("校验通过submit!");
        const query = {
          // 清分商户号
          clearMerNo: this.ruleForm.merNo,
          // 商户账户号
          merAccNo: this.ruleForm.merAccNo,
          // 交易金额
          txnAmt: this.ruleForm.txnAmt,
          // 交易类型 cash提现,transfer转账
          txnType: "cash",
        };
        cash(query).then((res) => {
          console.log("校验通过", res);

          // 数据重置
          this.ruleForm = {
            listMerAccInfoItem: "",
            bankAcctName: "",
            merAccName: "",
            merAccNo: "",
            merName: "",
            merNo: "",
            // 可提现金额
            withdrawableAmount: 0,
            // 交易金额
            txnAmt: null,
            serviceFee: 0, //手续费
            actReceiveAmt: 0, //到账金额
            // 备注
            remark: "",
          };
          this.inexistence = true;
          this.openSubmitForm();
          this.loading = false;
        });
      });
    },

    // 提示
    open() {
      this.$message({
        message: this.messageText,
        type: "warning",
      });
    },
    // 提示
    openSubmitForm() {
      this.$message({
        message: "提现申请已提交，请耐心等待~",
        type: "success",
      });
    },

    // 提现按钮
    withdraw(event) {
      event.preventDefault();
    },

    // 划转按钮
    transfer(event) {
      event.preventDefault();
    },
  },
};
</script>
<style lang="scss" scoped>
.search_button {
  width: 5rem;
  height: 2rem;
  margin-left: 20px;
}

.search_tip {
  text-align: center;
  height: 10rem;
  font-size: 1.2rem;
  line-height: 6rem;
  span {
    color: #000;
  }
}
.flex_1 {
  display: flex;
  flex-direction: column;
  ::v-deep .el-form-item {
    margin-bottom: 0;
  }
}
.head-button-color {
  color: #fff;
  background-color: #4783ff;
}

.head-buttonTX {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-right: 0;
  border-top: 1px solid #60626667;
  border-bottom: 1px solid #60626667;
  border-left: 1px solid #60626667;
  text-align: center;
  line-height: 32px;
  width: 60px;
  height: 32px;
}

.head-buttonZH {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-left: 0;
  border-top: 1px solid #60626667;
  border-bottom: 1px solid #60626667;
  border-right: 1px solid #60626667;
  text-align: center;
  line-height: 32px;
  width: 60px;
  height: 32px;
  background-color: #fff;
}

.form-button {
  transform: translateX(450px);
  margin-top: 20px;
}
@media screen and (min-width: 1600px) {
  .form-width {
    width: 450px;
  }
}
@media screen and (max-width: 1600px) {
  .form-width {
    width: 350px;
  }
}
</style>
